<template>
  <div class="fa-box">
    <div class="fa-list">
    <NewItem v-for="data in newslist" :key="data.gid" :data="data"></NewItem>
    </div>
    <div class="box">
      <Loading noMoreText='没有更多内容了~去其他页面看看吧' :loadShow="loadShow" :noMoreShow="noMoreShow" :loading="loading"></Loading>
    </div>

  </div>
</template>

<script>
import http from '@/util/http'
import scroll from '@/util/scroll'
import { mapState } from 'vuex'
import Loading from '@/components/utilView/loadingView.vue'
import NewItem from '@/components/news/newItem.vue'
export default {
  components: {
    Loading,
    NewItem
  },
  data () {
    return {
      newslist: [], // 点赞列表
      page: 1, // 点赞列表页码
      noMore: false, // 判断数据是否还有
      isRequest: false, // 网路请求控制
      loadShow: false, // 显示loading页面
      noMoreShow: false, // 没有更多数据提示
      loading: false // 加载中提示

    }
  },
  mounted () {
    window.addEventListener('scroll', this.windowScroll, true) // 监听页面滚动
    http.getPraise(this.user.uid, this.page).then(res => {
      this.newslist = res.data.newlist
      // console.log(res.data.newlist)
      if (res.data.newlist.length < 10) {
        this.noMore = true
        // 显示没有更多数据
        this.loadShow = true
        this.noMoreShow = true
        // console.log('数据不足')
      }
      this.page++
    })
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {

    // 实现无限加载更多数据
    // 回调函数
    windowScroll () {
      // 获取三个值

      const scrollTop = scroll.getScrollTop()
      const clientHeight = scroll.getClientHeight()
      const scrollHeight = scroll.getScrollHeight()
      // 距离底部10px时触发
      if (scrollTop + clientHeight + 10 > scrollHeight) {
        // 发送异步请求请求数据，同时携带offset并自增offset
        // noMore是自定义变量，如果是最后一批数据则以后都不加载
        if (!this.isRequest) {
          if (!this.noMore) {
            // isRequest限制请求的次数 上一次请求返回之前不会进行下一次请求 ，阻止发送多次请求
            this.isRequest = true
            // 显示加载中
            this.loadShow = true
            this.loading = true
            http.getPraise(this.user.uid, this.page).then((res) => {
              this.newslist = this.newslist.concat(res.data.newlist)
              // console.log(this.newlist)
              // 隐藏加载更多提示
              this.loadShow = false
              this.loading = false
              this.isRequest = false
              // 判断是否还有足够数据
              if (res.data.newlist.length < 10) {
                this.noMore = true
                // 显示没有更多数据
                this.loadShow = true
                this.noMoreShow = true
              }
              // 增加一页
              this.page++
            })
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.fa-box {
  width: 100%;
  height: auto;
  .fa-list {
    width: 1005;
    height: auto;

  }
  .box{
    width: 100%;
    height: 60px;
  }

}
</style>
